@import "../../assets/css/mixin";
@import "../../assets/css/variables";
@import "../../assets/css/orderList";
@import "../../assets/css/pull-to";

.home-container {
  .vue-pull-to-wrapper {
    flex: 1;
  }
  .top-load-wrapper {
    color: #3FACFF;
    .icon {
      fill: #3FACFF;
    }
  }
  .scroll-main {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .ts-home-top {
    position: relative;
    .ts-home-bg {
      .ts-home-img {
        width: 100%;
        max-height: 300px;
      }
    }
    .ts-header {
      color: #FFFFFF;
      position: absolute;
      height: 0;
      top: 0;
      background: transparent;
      padding: 0 .15rem;
      @include wh(100%, .88rem);
      .ts-wrapper {
        .ts-left {
          font-size: .3044rem;
          @include fja();
          @include wh(.88rem, .88rem);
          &:active {
            opacity: .6;
          }
          .ts-svg {
            @include wh(.18rem, .36rem);
          }
          .ts-circle {
            display: inline-block;
            @include wh(6px, 6px);
            margin-right: 3px;
            border-radius: 7px;
          }
        }
        .middle-title {
          @include center();
          @include wot();
          .ts-title {
            font-size: .36rem;
            font-weight: 500;
          }
        }
        .right-handle {
          @include sc(.30rem, $themeColor);
          color: #3194FB;
          right: .20rem;
          position: absolute;
          top: 50%;
          transform: translate(0, -50%);
          @include wh(16px, 15.5px);
          margin-top: -1px;
          &.isMessage {
            &:before {
              content: '';
              display: block;
              position: absolute;
              top: -2px;
              right: -2px;
              @include wh(6px, 6px);
              border-radius: 7px;
              background: #EA3D3C;
            }
          }
          .right-icon {
            @include wh(100%, 100%);
          }
        }
      }
    }
  }
  .account-detail-info {
    background-color: #ffffff;
    margin-top: -4px;
    display: flex;
    padding: .22rem .28rem;
    .info-item {
      flex: 1;
      text-align: center;
      .info-icon {
        width: .28rem;
      }
      .info-title {
        display: block;
        @include sc(.24rem, #2E2E2E);
      }
      .info-count {
        display: block;
        @include sc(.32rem, #FAA12F);
      }
    }
  }

  .filter {
    margin-top: .20rem;
    .filter-header {
      .active {
        color: $themeColor;
        &::after {
          width: 1.78rem !important;
        }
      }
    }
  }
}
